<template>
    <div>
        <!-- <div class="banner">
            
            <div class="bg">
                <div class="bg-box">
                    <img src="./images/bg.png" alt="" class="img1">
                    <img src="./images/banner2.png" alt="" class="img2">
                    <img src="./images/banner.png" alt="" class="img3">
                </div>
            </div>
            
            <div class="page">
                <ul class="dots">
                    <li class="dot-active dot"></li>
                    <li class="dot-active"></li>
                    <li class="dot-active dot"></li>
                </ul>
            </div>
        </div> -->
        <div class="banner">
            <div class="swiper-container banner-container" id="mySwiper">
                <div class="swiper-wrapper bg">
                    <!-- <div
                        class="swiper-slide"
                        v-for="banner in 4"
                        :key="banner.id"
                    >
                        <img src="./images/bg.png" alt="" class="img1" />
                    </div> -->
                    <!-- <div class="swiper-slide">
                        <img src="./images/1.jpg" alt="">
                    </div> -->
                    <div class="swiper-slide">
                        <img src="./images/2.jpg" alt="" />
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/3.jpg" alt="" />
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/4.jpg" alt="" />
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </div>
</template>

<script>
import Swiper from "swiper";
import { mapGetters } from "vuex";
export default {
    name: "Container",
    computed: {
        ...mapGetters("home", ["bannerList"]),
    },
    mounted() {},
    watch: {
        bannerList() {
            this.$nextTick(() => {
                new Swiper(".banner-container", {
                    // direction: 'vertical', // 垂直切换选项
                    loop: true, // 循环模式选项
                    effect: "fade", // 淡入淡出切换
                    // autoplay: true,//等同于以下设置
                    // autoplay: {
                    //     delay: 3000,
                    //     stopOnLastSlide: false,
                    //     disableOnInteraction: false,
                    // },
                    // 如果需要分页器
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true, // 单击小圆点也可以实现切换
                    },

                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },
                });
            });
        },
    },
};
</script>

<style lang="less" scoped>
.banner {
    cursor: pointer;
    position: relative;
    margin: 0 auto;
    width: 1220px;
    .bg {
        position: relative;
        width: 1220px;
        height: 500px;
        margin: 20px auto 0;
        .swiper-slide {
            overflow: hidden;
            border-radius: 8px;
            img {
                // background-image: url(./images/2.jpg);
                // background-position: top top;
                // background-size: cover;
                // width:100%;
                height:100%;
                display: block;
                position: absolute;
                right: 0;
                top: 0;
            }
        }
    }
    .page {
        position: absolute;
        width: 100%;
        top: 470px;
        z-index: 30;
        .dots {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .dot-active {
                display: inline-block;
                width: 15px;
                height: 15px;
                background-color: #f5f5f5;
                border-radius: 8px;
                margin-right: 10px;
                cursor: pointer;
            }
            .dot {
                opacity: 0.2;
            }
        }
    }
}
</style>